<script lang='ts' setup name='App'>
import { ref } from "vue";
//vue3 直接引入就可以使用（局部组件）
import UserForm from "@/components/UserForm.vue";
import  type { User } from "@/types/index";



const user1 = ref<User>({
      id:'asdfas-dsf-01',
      username:'admin',
      password:'123456',
      nickname:'管理员',
      avatrual:'http:/asdfasfdasfdasfdasf/asfasf/asdf/asf.png',
})

const user2 = ref({
      id:'sdf-sadf-02',
      username:'root',
      password:'$%^&*()_',
      nickname:'超级管理员',
      avatrual:'http:/asdfasfdasfdasfdasf/asfasf/asdf/asf.png',
})

</script>

<template>
     
      <div class="parent">

            <UserForm :user="user1" />
            <UserForm :user="user2" />


      </div>


</template>

<style scoped>
      .parent{
            border: solid 1px gray;
            padding: 10px;
            background-color: antiquewhite;
      }

</style>